'use client'
import Head from "next/head";
import { useCallback, useEffect, useState } from "react";
import dynamic from 'next/dynamic';
import { Button } from '@mantine/core';
import Layout from "@/common/layout";
import Styles from './index.module.less'
// import ReactQuill from "react-quill";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "react-quill/dist/quill.snow.css";
import toast,{ Toaster } from 'react-hot-toast';
import { getUserFromReq } from '@/utils/server';
import { ClientAxios } from '@/common/useAxios';
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
    ["blockquote", "code-block"], // 引用，代码块
    [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
    [{ list: "ordered" }, { list: "bullet" }], // 列表
    [{ script: "sub" }, { script: "super" }], // 上下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    [{ direction: "rtl" }], // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
    [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
    // [{ font: [] }], // 字体
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除字体样式
    // ["image", "video"], // 上传图片、上传视频               // remove formatting button
];
function Create(){
    const [titValue,setTitValue] = useState('');
    const [content,setContent] = useState('')
    const submit = useCallback(()=>{
        if(!titValue){
            toast('请输入文章标题');
            return;
        }
        if(!content){
            toast('请输入文章内容');
            return;
        }
        // const suolue = content.replace(/<[^>]+>/g, "")
        ClientAxios.post('/user/create_article',{
            title:titValue,
            content:content
        }).then(({data:res})=>{
            if(res.code == 1){
                setTitValue('')
                setContent('')
            }
            toast(res.msg);
        })
    },[content,titValue])
    return (
        <>
            <Layout title={'写文章'}>
                <div className={Styles.cont}>
                    <h3>文章标题</h3>
                    <input value={titValue} onChange={(e)=>{setTitValue(e.target.value)}} className="titinput" type="text" />
                    <h3>正文内容</h3>
                    <div className="use-react-quill-box">
                        <ReactQuill 
                            value={content}
                            onChange={setContent}
                            className={'use-react-quill'}
                            theme="snow"
                            modules={{toolbar: toolbarOptions}}
                        />
                    </div>
                    <Button onClick={submit}>提交</Button>
                </div>
            </Layout>
        </>
    )
}

export async function getServerSideProps(context){
    const user = await getUserFromReq(context.req)
    if(!user){
        return {
            redirect:{
                permanent: false,
                destination: '/login'
            }
        }
    }
    return {
        props:{

        }
    }
}
export default Create